<template>
    <div class="process">
        <div class="content">
            <div class="title">
                <hr>
                <div class="title-text">
                    学车流程
                </div>
                <div class="title-text2">驾考宝典整合学车全流程，驾考宝典为用户提供全方位学车服务</div>
            </div>
            <ul class="learn_list">
                <li v-for="(item, index) in  flowList" :key="index" @mouseleave="item.flag = !item.flag"
                @mouseenter="item.flag = !item.flag">
                    <a :href= item.url target="_blank" rel="noopener noreferrer">
                        <img :src="item.flag ? item.icon1 : item.icon" alt="">
                        <h3>{{ item.title }}</h3>
                        <p>{{ item.reduce }}</p>
                    </a>
                </li>
            </ul>
        </div>
            
    </div>
</template>

<script>
    export default{
        data () {
        return {
            flowList: [
                {
                    "icon": "https://nanjing.jiakaobaodian.com/core-assets/jiakao/application/home/files/0fc72e66088099891c2317a3e1da2b34.png",
                    "icon1": "https://nanjing.jiakaobaodian.com/core-assets/jiakao/application/home/files/c2bd46beadd55d86e8f9bdf02dfa7118.png",
                    "title": "找驾校",
                    "url":"https://www.jiakaobaodian.com/school/",
                    "reduce": "口碑好的驾校",
                    "flag": false
                },
                {
                    "icon": "https://nanjing.jiakaobaodian.com/core-assets/jiakao/application/home/files/ea7968d83db78dd84782f5fb7cdb0ba4.png",
                    "icon1": "https://nanjing.jiakaobaodian.com/core-assets/jiakao/application/home/files/1eb80628cc561dc9a0670ae1c0811437.png",
                    "url": "https://www.jiakaobaodian.com/mnks/kemu1/car.html",
                    "title": "科目一",
                    "reduce": "驾驶员理论考试",
                    "flag": false
                },
                {
                    "icon1": "https://nanjing.jiakaobaodian.com/core-assets/jiakao/application/home/files/765b9d1d155a4d2fac799b89e3efe4df.png",
                    "icon": "https://nanjing.jiakaobaodian.com/core-assets/jiakao/application/home/files/1a6197c837b9e484084f9fe1b15c08fe.png",
                    "url": "https://www.jiakaobaodian.com/mnks/kemu2/car.html",
                    "title": "科目二",
                    "reduce": "场地驾驶技能考试科目",
                    "flag": false
                },
                {
                    "icon": "https://nanjing.jiakaobaodian.com/core-assets/jiakao/application/home/files/0fc72e66088099891c2317a3e1da2b34.png",
                    "icon1": "https://nanjing.jiakaobaodian.com/core-assets/jiakao/application/home/files/c2bd46beadd55d86e8f9bdf02dfa7118.png",
                    "url": "https://www.jiakaobaodian.com/mnks/kemu3/car.html",
                    "title": "科目三",
                    "reduce": "机动车驾驶人道路考试",
                    "flag": false
                },
                {
                    "icon": "https://nanjing.jiakaobaodian.com/core-assets/jiakao/application/home/files/ea7968d83db78dd84782f5fb7cdb0ba4.png",
                    "icon1": "https://nanjing.jiakaobaodian.com/core-assets/jiakao/application/home/files/1eb80628cc561dc9a0670ae1c0811437.png",
                    "url": "https://www.jiakaobaodian.com/mnks/kemu4/car.html",
                    "title": "科目四",
                    "reduce": "安全文明驾驶常识考试",
                    "flag": false
                },
                {
                    "icon1": "https://nanjing.jiakaobaodian.com/core-assets/jiakao/application/home/files/765b9d1d155a4d2fac799b89e3efe4df.png",
                    "icon": "https://nanjing.jiakaobaodian.com/core-assets/jiakao/application/home/files/1a6197c837b9e484084f9fe1b15c08fe.png",
                    "url": "javascript:;",
                    "title": "拿本",
                    "reduce": "开兴拿本，安全驾驶",
                    "flag": false
                },
            ]
        }
    }

    }
</script>

<style lang="scss">
    .process{
       
        .content{
            width: 1200px;
            margin: 60px auto;
            //background-color: palegoldenrod;
            .title{
                margin-bottom: 40px;
                text-align: center;
                padding-top: 20px;
                hr{
                    height: 1px;
                    border: none;
                    border-top:1px dotted #e9e9e9
                }
                .title-text{
                    display: inline-block;
                    margin-top: -20px;
                    line-height: 41px;
                    padding: 0 45px;
                    background-color: #fff;
                    font-size: 30px;
                    
                }
                .title-text2{
                    font-size: 16px;
                    margin: 30px 0;
                    color: #666;
                }
            }
            
                .learn_list {
                    display: flex;
                    margin-top: 40px;
            
                    li {
                        flex: 1;
                        height: 212px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        cursor: pointer;
            
                        a{
                            display: block;
                            flex: 1;
                            height: 212px;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            cursor: pointer;
                            h3 {
                                color: rgb(51, 51, 51);
                                font-size: 24px;
                                font-weight: normal;
                                padding-top: 30px;
                                padding-bottom: 10px;
                            }
                
                            p {
                                color: #999;
                                font-size: 14px;
                                margin: 10px -20px;
                            }
                
                            &:hover {
                
                
                                h3 {
                                    color: #37B5F8;
                                }
                            }
                        }
                    }
                }
            
            
        }
    }
</style>